<template>
  <el-card class="mb-20px" shadow="hover">
    <div class="mx-10px leading-10">
      <el-row :gutter="20" justify="space-between">
        <span :class="`${prefixCls}__item--text text-20px font-semibold`">
          {{ item.name }}
        </span>
        <span :class="`${prefixCls}__item--text text-14px text-blue-500`">
          <el-button type="primary" link :icon="Edit" @click="openForm('update', item.id)"
            >编辑</el-button
          >
        </span>
      </el-row>
    </div>
    <el-divider border-style="dashed" style="margin: 10px 0" />
    <div class="mx-10px leading-10">
      <el-row :gutter="20">
        <span :class="`${prefixCls}__item--text text-14px text-gray-500 font-semibold`">
          学历：
        </span>
        <span :class="`${prefixCls}__item--text text-14px text-gray-500`">
          <dict-tag
            :type="DICT_TYPE.HOSPITAL_RECRUITMENT_EDUCATION_LEVEL"
            :value="item.education"
          />
        </span>
      </el-row>
    </div>
    <div class="mx-10px leading-8">
      <el-row :gutter="20">
        <span :class="`${prefixCls}__item--text text-14px text-gray-500 font-semibold`">
          地点：
        </span>
        <span :class="`${prefixCls}__item--text text-14px text-gray-500`">
          {{ item.jobPlace }}
        </span>
      </el-row>
    </div>
    <div class="mx-10px leading-8">
      <el-row :gutter="20">
        <span :class="`${prefixCls}__item--text text-14px text-gray-500 font-semibold`">
          人数：
        </span>
        <span :class="`${prefixCls}__item--text text-14px text-gray-500`">
          {{ item.number }}
        </span>
      </el-row>
    </div>
    <div class="mx-10px leading-6">
      <el-row :gutter="20">
        <span :class="`${prefixCls}__item--text text-14px text-gray-500 font-semibold`">
          职位简介：
        </span>
      </el-row>
    </div>
    <div class="leading-6 min-h-22 bg-gray-100 p-10px px-20px rounded-5px my-5px">
      <el-row :gutter="20">
        <el-popover
          :content="item.description"
          placement="right-end"
          popper-style="min-width: 200px; width: 20%"
        >
          <template #reference>
            <span :class="`${prefixCls}__item--text text-14px text-gray-500 line-clamp-3`">
              {{ item.description }}
            </span>
          </template>
        </el-popover>
      </el-row>
    </div>
    <div class="mx-10px leading-6">
      <el-row :gutter="20">
        <span :class="`${prefixCls}__item--text text-14px text-gray-500 font-semibold`">
          任职要求：
        </span>
      </el-row>
    </div>
    <div class="leading-6 min-h-22 bg-gray-100 p-10px px-20px rounded-5px my-5px">
      <el-row :gutter="20">
        <el-popover
          :content="item.jobRequire"
          placement="right-end"
          popper-style="min-width: 200px; width: 20%"
        >
          <template #reference>
            <span :class="`${prefixCls}__item--text text-14px text-gray-500 line-clamp-3`">
              {{ item.jobRequire }}
            </span>
          </template>
        </el-popover>
      </el-row>
    </div>
    <div class="mx-10px leading-10">
      <el-row :gutter="20" justify="space-between">
        <!-- <span :class="`${prefixCls}__item--text text-14px text-gray-500`"> 薪资： </span> -->
        <span :class="`${prefixCls}__item--text text-22px text-red-400`">
          {{ item.miniSalary }} - {{ item.maxSalary }}
        </span>
        <span :class="`${prefixCls}__item--text text-14px text-gray-500`">
          <el-button type="success" link @click="openForm2(item)">
            查看岗位候选人<el-icon><ArrowRightBold /></el-icon>
          </el-button>
        </span>
      </el-row>
    </div>
    <!-- <br /> -->

    <!-- <div :class="`${prefixCls}__item--text text-12px text-gray-500`"> 应聘进度 </div>
              <el-progress :percentage="50" /> -->
  </el-card>

  <!-- 表单弹窗：添加/修改 -->
  <RecruitmentPositionForm ref="formRef" @success="getList" />

  <!-- 查看岗位候选人 -->
  <RecruitmentResumeDelivery ref="formRef2" />
</template>

<script lang="ts" setup>
import { PropType } from 'vue'
import { getIntDictOptions, getStrDictOptions, DICT_TYPE } from '@/utils/dict'

import RecruitmentPositionForm from './RecruitmentPositionForm.vue'
import RecruitmentResumeDelivery from './resumedelivery/index.vue'

import { ArrowRightBold, Edit } from '@element-plus/icons-vue'

interface ItemType {}

const props = defineProps({
  list: {
    type: Array as PropType<ItemType[]>,
    default: () => []
  },
  item: {
    type: Object,
    default: () => {}
  }
})

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

const emit = defineEmits(['update'])

/** 岗位候选人 */
const formRef2 = ref()
const openForm2 = (item: any) => {
  formRef2.value.open(item.id, item.name)
}

/** 查询列表 */
const getList = async () => {
  emit('update')
}
</script>